<template>
  <el-form style="width: 100%">
    <el-form-item>
      <el-select
        style="width: 100%"
        v-model="form.clientName"
        filterable
        clearable
        remote
        reserve-keyword
        :placeholder="$t('customer.iptCustName')"
        :remote-method="remoteMethod"
        @change="selectProfileChange"
        @clear="clearVal"
      >
        <el-option
          v-for="item in profileList"
          :key="item"
          :label="item.custName"
          :value="item.passportNo"
        >
          <span>{{ item.custName }}&nbsp;{{ item.custNameEn }}/{{ item.passportNo }}</span>
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, onActivated } from 'vue'
import { getCustomerList } from '@/api/customer'
import { useEmitt } from '@/hooks/web/useEmitt'
export default {
  props: {
    queryType: String //查詢類型，報表：report
  },
  setup(props) {
    const { emitter } = useEmitt()
    const state = reactive({
      form: { clientName: '' }, // 查找个人资料
      profileList: [], // 查询出个人信息列表
      queryType: props.queryType
    })
    onMounted(async () => {
      init()
    })
    onActivated(async () => {})
    const methods = {
      clearVal() {
        state.custId = null
        emitter.emit('getCustomerId', null)
      },
      // 获取客户列表，模糊查询
      async remoteMethod(query) {
        if (query) {
          await getCustomerList({ key: query }).then((res) => {
            if (res) {
              state.profileList = res.data
            }
          })
        }
      },
      selectProfileChange(e) {
        for (const item of state.profileList) {
          if (item.passportNo == e) {
            // 如果綁定的是報表，返回客戶信息數組
            if (state.queryType == 'report') {
              // 根據客戶ID返回客戶明細
              emitter.emit('getCustomerId', item)
            }
          }
        }
      }
    }
    // 渲染页面的接口
    const init = async () => {}
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>
<style scoped></style>
